<template>
  <div class="file-type-icon">
    <file-outlined v-if="fileType === 'file'" :style="iconStyle" />
    <file-image-outlined v-else-if="fileType === 'image'" :style="iconStyle" />
    <file-pdf-outlined v-else-if="fileType === 'pdf'" :style="iconStyle" />
    <file-word-outlined v-else-if="fileType === 'word'" :style="iconStyle" />
    <file-excel-outlined v-else-if="fileType === 'excel'" :style="iconStyle" />
    <file-ppt-outlined v-else-if="fileType === 'ppt'" :style="iconStyle" />
    <file-zip-outlined v-else-if="fileType === 'archive'" :style="iconStyle" />
    <file-text-outlined v-else-if="fileType === 'text'" :style="iconStyle" />
    <video-camera-outlined v-else-if="fileType === 'video'" :style="iconStyle" />
    <sound-outlined v-else-if="fileType === 'audio'" :style="iconStyle" />
    <file-unknown-outlined v-else :style="iconStyle" />
  </div>
</template>

<script lang="ts" setup>
import { computed, defineProps } from 'vue';
import { 
  FileOutlined, 
  FileImageOutlined,
  FilePdfOutlined,
  FileWordOutlined,
  FileExcelOutlined,
  FilePptOutlined,
  FileZipOutlined,
  FileTextOutlined,
  VideoCameraOutlined,
  SoundOutlined,
  FileUnknownOutlined
} from '@ant-design/icons-vue';

const props = defineProps({
  fileType: {
    type: String,
    default: 'file'
  },
  size: {
    type: Number,
    default: 24
  },
  color: {
    type: String,
    default: ''
  }
});

const iconStyle = computed(() => {
  const style: Record<string, string> = {
    fontSize: `${props.size}px`,
  };
  
  if (props.color) {
    style.color = props.color;
  }
  
  return style;
});
</script>

<style lang="less" scoped>
.file-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style> 